﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>文件管理</title>

    <!--common-->
    <link href="/resources/src/css/main.css" rel="stylesheet">
    <link href="/resources/src/css/responsive.css" rel="stylesheet">
    <link href="/resources/src/css/file-list.css" rel="stylesheet">
</head>
<body class="sticky-header" style="background-color: #f5f8f9;">
    
    <jsp:include page="left-slide.jsp" />
    <div class="main-content">
        <jsp:include page="header-start.jsp" />
        <div class="fileList">
            <div class="fileBar">
                <h3>文件管理</h3>
                <div class="barRight">
                    <div class="barBtn newCreat"><i class="iconfont icon-tianjia"></i> 添加</div>
                    <div class="barBtn fileSearch"><i class="iconfont icon-sousuo-sousuo1"></i> 搜索</div>
                    <input type="text" placeholder="输入文件名称查找">
                </div>
            </div>
            <div class="creatBar">
                <div class="cwrap">
                    <div class="cfileName">
                        <i class="iconfont icon-iconfontwenjian2copy"></i>
                        <input type="text" placeholder="请输入文件名称">
                    </div>
                    <div class="cfileBtn">
                        <span class="cYesBtn">确定</span>
                        <span class="cNoBtn">取消</span>
                        <!-- <i class="iconfont icon-weibiaoti2fuzhi03" icontip='重新命名'></i>
                        <i class="iconfont icon-shanchu2" icontip='删除'></i> -->
                    </div>
                </div>
            </div>
            <div class="fileRow">
                <ul>
                    <li>
                        <div class="rfileName"><i class="iconfont icon-iconfontwenjian2copy"></i> <span>1231231</span></div>
                        <div class="rfileBtn">
                            <i class="iconfont icon-weibiaoti2fuzhi03" icontip='重新命名' data-toggle="modal" data-target="#editFileName" dataid='1'></i>
                            <i class="iconfont icon-shanchu2" icontip='删除' data-toggle="modal" data-target="#deleteFolder"></i>
                        </div>
                        <div class="rfileTime">最新修改时间：2017年5月18日 14:55</div>
                        <div class="rfileNum">共78个文件</div>
                    </li>
                    <li>
                        <div class="rfileName"><i class="iconfont icon-iconfontwenjian2copy"></i> <span>1231231</span></div>
                        <div class="rfileBtn">
                            <i class="iconfont icon-weibiaoti2fuzhi03" icontip='重新命名' data-toggle="modal" data-target="#editFileName"></i>
                            <i class="iconfont icon-shanchu2" icontip='删除' data-toggle="modal" data-target="#deleteFolder"></i>
                        </div>
                        <div class="rfileTime">最新修改时间：2017年5月18日 14:55</div>
                        <div class="rfileNum">共78个文件</div>
                    </li>
                    <li>
                        <div class="rfileName"><i class="iconfont icon-iconfontwenjian2copy"></i> <span>1231231</span></div>
                        <div class="rfileBtn">
                            <i class="iconfont icon-weibiaoti2fuzhi03" icontip='重新命名' data-toggle="modal" data-target="#editFileName"></i>
                            <i class="iconfont icon-shanchu2" icontip='删除' data-toggle="modal" data-target="#deleteFolder"></i>
                        </div>
                        <div class="rfileTime">最新修改时间：2017年5月18日 14:55</div>
                        <div class="rfileNum">共78个文件</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    

    
    <!-- 更改文件名称模态框（Modal） -->
    <div class="modal fade" id="editFileName" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">修改文件夹名称</h4>
                </div>
                <div class="modal-body">
                    <input type="text" id="editArea" placeholder="请输入要更换的文件夹名称" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary saveFileName">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- 删除模态框（Modal） -->
    <div class="modal fade" id="deleteFolder" tabindex="-1" role="dialog" aria-labelledby="deleteFolderTit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="deleteFolderTit">删除文件夹</h4>
                </div>
                <div class="modal-body">
                    是否删除？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger deleteFileBtn">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.0/jquery.nicescroll.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/resources/src/js/main.js"></script>
    <script>
        var $checkElement;
        $('#editFileName').on('show.bs.modal', function (data) {
          // 执行一些动作...
          // console.log($(this).html());
          
          // console.log(data);
          $checkElement = data.relatedTarget.attributes.dataid.nodeValue;
        })

        $('.saveFileName').on('click',function(){
            console.log('保存');
            console.log($checkElement);
        });
        $('.newCreat').click(function(){
            $('.creatBar').stop().slideToggle(300);
        });
        $('.cNoBtn').click(function(){
            $('.creatBar').stop().slideUp(300);
        });        
    </script>
</body>
</html>